@import models.Tables.GeneRow
@(row: GeneRow, genbank: String)(implicit session: Session)
@english.home.main("Chloroplast Gene Info") {


    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

    <style>
            th {
                width: 20%;
            }

            .myBold {
            }

            .myTd {
                max-height: 150px;
                overflow: auto;
                padding-right: 25px;
            }

            .js-plotly-plot .plotly .cursor-crosshair {
                cursor: default;
            }

            .area_img {
                float: left;
                padding-right: 10px;
            }

            .seq {
                height: 150px;
                overflow: auto;
                padding-right: 25px;
            }

    </style>

    <div id="content" class="container">
        <h1 class="title"><a href="@routes.GenomeController.browserPage("")">Genome</a> -
            <a href="@routes.GenomeController.genomeInfoPage(row.gbid)">@genbank</a> - @row.geneid</h1>
        <div class="line"></div>


        <div class="box">
            <h4 class="area" id="genomeb">
                <div class="area_img">
                    <i class="fa fa-minus"></i>
                </div>
                <span class="area_title" data-id="1">Basic</span>
            </h4>
            <div class="picture_list">

                <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
                    word-wrap: break-word">
                    <tbody>
                        <tr>
                            <th>Gene ID</th>
                            <td>
                            @row.geneid
                            </td>
                        </tr>

                        <tr>
                            <th>GenBank</th>
                            <td>
                            @genbank
                            </td>
                        </tr>

                        <tr>
                            <th>Length</th>
                            <td id="length">

                            </td>
                        </tr>
                        <tr id="strand">
                            <th>Strand</th>
                            <td>
                            @row.strand
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>

        <div class="box">
            <h4 class="area" id="genomeb">
                <div class="area_img">
                    <i class="fa fa-minus"></i>
                </div>
                <span class="area_title" data-id="1">Genome Browser</span>
            </h4>
            <div class="picture_list">
                <iframe style="border: 1px solid rgb(80, 80, 80);" id="iframe" height="250" width="898px"
                name="jbrowse_iframe">
                </iframe>

            </div>
        </div>

        <div class="box">
            <h4 class="area">
                <div class="area_img">
                    <i class="fa fa-minus"></i>
                </div>
                <span class="area_title" data-id="1">Sequence</span>
            </h4>
            <div class="picture_list">
                <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
                    word-wrap: break-word">
                    <tbody>
                        <tr>
                            <th>gene
                                <button class="btn-link" onclick="downloadSeq('gene')"><i class="fa fa-download"></i></button>
                            </th>
                            <td class="monospace">
                                <div class="seq">
                                    <div id="gene" style="width: 350px">

                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr id="cdsShow" style="display: none">
                            <th>CDS
                                <button class="btn-link" onclick="downloadSeq('cds')"><i class="fa fa-download"></i></button>
                            </th>
                            <td class="monospace">
                                <div class="seq">
                                    <div id="cds" style="width: 350px">

                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr id="pepShow" style="display: none">
                            <th>Protein
                                <button class="btn-link" onclick="downloadSeq('pep')"><i class="fa fa-download"></i></button>
                            </th>
                            <td class="monospace">
                                <div class="seq">
                                    <div id="pep" style="width: 350px">

                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>


    </div>


    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>


    <script>


            function downloadSeq(types) {
                const fileName = "@row.geneid" + "_" + types + ".fa";
                const content = ">@row.geneid\n" + $("#" + types).text().trim();
                const blob = new Blob([content], {
                    type: "text/plain;charset=utf-8"
                });
                saveAs(blob, fileName)
            }


            $(function () {

                let length = "@(row.end - row.start + 1)"
                $("#length").text(length.replace(/\d{1,3}(?=(\d{3})+$)/g,function(s){
                    return s+','
                }))

                let host = "http://210.22.121.250:20795"
                $("#iframe").attr("src", host + "/?data=my_data/MODB/data&loc=@genbank:@row.start..@row.end&tracks=DNA,Annotation&tracklist=0&nav=1&overview=0");

                $.ajax({
                    url: "/US/mollusk/genome/getSeqs?gb=@{genbank}&range=@row.geneid",
                    type: "get",
                    success: function (data) {
                        if (data.valid === "true") {
                            $("#gene").html(data.gene)
                            if (data.cds != "") {
                                $("#cds").html(data.cds);
                                $("#cdsShow").show();
                            }

                            if (data.pep != "") {
                                $("#pep").html(data.pep);
                                $("#pepShow").show();
                            }
                        }
                    }
                })


                let pro = "@row.product";
                let pros = pro.split(";");
                let html = "";
                $.each(pros, function (i, v) {
                    let a = v.split("=")
                    html += "<tr><th>" + a[0] + "</th><td>" + a[1] + "</td></tr>";
                })

                $("#strand").after(html);

            })
    </script>
}